﻿<div class="layui-card" id="lg-TuitionTemplateList">
    <div class="layui-card-header"><i class="fa fa-home fa-fw"></i>学费模板</div>
    <div class="layui-card-body" id="">
        <!--数据主体-->
        <div class="lg-form-box">
            <!--头部工具条-->
            <div class="lg-table-tool" id="toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="OnAETemplate()"><i class="fa fa-plus fa-fw"></i>添加模板</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary refresh" v-on:click="refresh"><i class="fa fa-refresh fa-fw"></i>刷新</button>
                </div>
            </div>
            <!--table-->
            <div class="lg-table-body">
                <table class="lg-table">
                    <thead>
                        <tr>
                            <th class="lg-table-check" v-on:click='onRowCheckAll'>
                                <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':templates.length>0&&checked.length==templates.length}]" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>
                            </th>
                            <th style="text-align:center">名称</th>
                            <th style="text-align:center">描述</th>
                            <th style="text-align:center;width:60px">权重</th>
                            <th style="text-align:center;width:120px">日期</th>
                            <th style="text-align:center;width:80px">状态</th>
                            <th style="width:160px">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="row in templates">
                            <td class="lg-table-check">
                                <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':isChecked(row)}]" lay-skin="primary" v-on:click="onRowCheck(row)"><i class="layui-icon layui-icon-ok"></i></div>
                            </td>
                            <td>{{row.Title}}</td>
                            <td>{{row.Tips}}</td>
                            <td style="text-align:center">{{row.SortNumber}}</td>
                            <td>{{row.AddTime}}</td>
                            <td>
                                <div :class="['layui-unselect layui-form-switch',{'layui-form-onswitch':row.IsUsing==1}]" v-on:click="IsUsingEvent(row)">
                                    <em>{{row.IsUsing==1?"ON":"OFF"}}</em><i></i>
                                </div>
                            </td>                         
                            <td>
                                <a class="layui-btn layui-btn-xs layui-btn-normal" title="编辑" v-on:click="OnAETemplate(row)"><span class="fa fa-pencil-square-o fa-fw "></span></a>
                                <a class="layui-btn layui-btn-xs layui-btn-warm" title="删除" v-on:click="OnTemplateDelete(row)"><span class="fa fa-trash-o fa-fw"></span></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="LgTable-NoData" v-if="templates.length==0||loading">
                    <p v-if="!loading">没有数据 ~</p>
                    <p v-if="loading"><img src="/Plugins/layer/theme/default/loading-2.gif" style="width:20px" /> 数据加载中...</p>
                </div>
            </div>
            <!--分页-->
            <div id="pager-tuitiontemplate" style="margin-top:-10px;"></div>
        </div>
    </div>
    <!--弹层-->
    <div id="TemplateAEWrap" style="display:none;padding:20px">
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">模版名称</label>
                <div class="layui-input-block">
                    <input type="text" name="Title" autocomplete="off" placeholder="请输入模版名称" class="layui-input lg-form-reg" v-model="template.Title">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">模版描述</label>
                <div class="layui-input-block">
                    <input type="text" name="Tips" autocomplete="off" placeholder="请输入模版描述" class="layui-input" v-model="template.Tips">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权重</label>
                <div class="layui-input-block">
                    <input type="number" name="SortNumber" autocomplete="off" placeholder="" class="layui-input" v-model="template.SortNumber">
                </div>
            </div>
            <hr />
            <div class="lg-table-tools">
                <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="AddItem"><i class="fa fa-plus fa-fw"></i>添加缴费项</button>
            </div>
            <div class="layui-form-item">
            <table class="lg-table">
                <thead>
                    <tr>
                        <th>项目</th>                       
                        <th>备注</th>
                        <th style="width:120px">金额</th>
                        <th style="width:50px">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in template.Items">
                        <td>
                            <input type="text" v-model="item.Title" />
                        </td>
                        <td>
                            <input type="text" v-model="item.Tips"  />
                        </td>
                        <td>
                            <input type="number" v-model="item.Amount"  />
                        </td>
                        <td style="text-align:center"><i v-on:click="RemoveItem(index)" class="fa fa-trash-o hover-warm"></i></td>
                    </tr>     
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="2" style="text-align:right;">合计金额</td>
                        <td colspan="2">{{totalAmount}}</td>
                    </tr>
                </tfoot>
            </table>
            </div>
            <div class="layui-form-item text-center">
                    <button class="layui-btn" type="button" v-on:click="SubmitTemplate">确认添加</button>
            </div>
        </div>
    </div>
</div>
<script class="tempScript" type="module">
    import { freeForm } from '/plugins/lgform/lg.form.2.1.js'
    freeForm.addEventListener();
    frame.createPage({
        mounted: function() {
            var page = this;
            var app = Vue.createApp({
                data() {
                    return {
                        templates: [],
                        template: {},
                        where: {
                            Page: 1,
                            Limit: 10,
                            Title: "",
                        },
                        checked: [],
                        loading: false,
                        
                    }
                },
                mounted:function() {
                    this.GetTemplates();
                    this.TemplateInit();//初始化添加或编辑对像
                },
                computed: {
                    totalAmount: function() {
                        var total = 0;
                        for (let i in this.template.Items) {
                            total += this.template.Items[i].Amount;
                        }
                        return total
                    }
                },
                methods: {
                    GetTemplates: function() {
                        this.loading = true;
                        this.templates = [];
                        lg.request({
                            url: "/api/sys/apply/GetTuitionTemplateList",
                            data: this.where,
                            success: res => {
                                if (res.code == 0) {
                                    if (res.count > 0) {
                                        this.templates = res.data;
                                        this.setPage(res.count)
                                    }

                                } else {
                                    layer.msg(res.msg, { icon: 2 });
                                }
                            },
                            complete: res => {
                                this.loading = false;
                            }
                        })
                    },
                    TemplateInit: function(obj) {
                        if (obj) {
                            this.template = {
                                Id: obj.Id,
                                Title: obj.Title || "",
                                Tips: obj.Tips || "",
                                SortNumber:obj.SortNumber||0,
                                Items: obj.Items || []
                            }
                        } else {
                            this.template = {
                                Id: 0,
                                Title: "",
                                Tips: "",
                                SortNumber:0,
                                Items: []
                            }
                        }
                    },
                    onSearch: function() {
                        this.where.Page = "1";
                        this.GetTemplates();
                    },
                    refresh: function() {
                        this.GetTemplates();
                    },
                    setPage: function(count) {
                        var that = this;
                        layui.laypage.render({
                            elem: 'pager-tuitiontemplate'
                            , curr: that.where.Page
                            , limit: that.where.Limit
                            , count: count
                            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                            , jump: function(obj, first) {
                                if (!first) {
                                    that.where.Page = obj.curr;
                                    that.where.Limit = obj.limit;
                                    that.GetTemplates();
                                }
                            }
                        });
                    },
                    OnAETemplate: function(item) {
                        if (item) {
                            var obj=lg.obj.copy(item);
                            obj.Items=lg.convert.toJson(obj.Items,[])
                            this.TemplateInit(obj);
                        }
                        layer.open({
                            type:1,
                            area:['900px','800px'],
                            content:$("#TemplateAEWrap"),
                            cancel: this.TemplateInit
                        })
                    },
                    OnTemplateDelete: function(item) {
                        var that = this;
                        layer.confirm("删除不可恢复，是否确定继续执行？", function(box) {
                            layer.close(box);
                            lg.request({
                                url: "/api/sys/apply/deleteTuitionTemplate",
                                method: "post",
                                data: { id: item.Id },
                                success: res => {
                                    if (res.code == 0) {
                                        that.refresh();
                                    } else {
                                        layer.msg(res.msg, { icon: 2 })
                                    }
                                }
                            })
                        })

                    },
                    isChecked: function(item) {
                        return this.checked.filter(p => p.Id == item.Id).length == 1;
                    },
                    onRowCheck: function(item) {
                        if (this.isChecked(item)) {
                            this.checked = this.checked.filter(p => p.Id != item.Id);
                        } else {
                            this.checked.push(item);
                        }
                    },
                    onRowCheckAll: function() {
                        var b = this.checked.length == this.templates.length;
                        if (b) {
                            this.checked = []
                        } else {
                            var arry = [];
                            for (let i in this.templates) {
                                arry.push(this.templates[i]);
                            }
                            this.checked = arry;
                        }

                    },
                    onCheckAll: function(attr) {
                        var b = false;
                        var checkCount = this.colmaps.filter(p => p[attr]).length;
                        var count = this.colmaps.length;
                        if (checkCount == count) {
                            b = true;
                        }
                        for (let i in this.colmaps) {
                            this.colmaps[i][attr] = !b;
                        }
                    },
                    AddItem: function() {
                        this.template.Items.push({
                            Title:"",
                            Tips:"",
                            Amount:0
                        })
                    },
                    RemoveItem: function(index) {
                        var that = this;
                        layer.confirm("是否确认移除该收费项？", function(box) {
                            layer.close(box);
                            that.template.Items.splice(index,1)
                        })
                    },
                    IsUsingEvent: function(item) {
                        var _data = {
                            Id:item.Id,
                            IsUsing:item.IsUsing==1?0:1
                        }
                        lg.request({
                            url:"/api/sys/apply/EditTuitionTemplate",
                            method:"post",
                            data:_data,
                            success: res => {
                                if (res.code == 0) {
                                    item.IsUsing = _data.IsUsing
                                } else {
                                    layer.msg(res.msg, {icon:2})
                                }
                            }
                        })
                    },
                    SubmitTemplate: function() {
                        var template = lg.obj.copy(this.template);
                        template.Items=JSON.stringify(template.Items)
                        var url="/api/sys/apply/AddTuitionTemplate"
                        if (template.Id) {
                            url="/api/sys/apply/EditTuitionTemplate"
                        }
                        lg.request({
                            url:url,
                            method:"post",
                            data:template,
                            success: res => {
                                if (res.code == 0) {
                                    layer.closeAll();
                                    this.TemplateInit();
                                    layer.msg("执行成功！", { icon: 1 });
                                    this.refresh();
                                }else{
                                    layer.msg(res.msg, {icon:2})
                                }
                            }
                        })
                    }
                }
            })
            freeForm.regComponent(app);
            this.vm = app.mount("#lg-TuitionTemplateList");
        },
        methods: {
            reload: function() {
                this.vm.refresh();
            },
        }
    }).mount();
</script>